﻿<!DOCTYPE html>

<html>
<head>
<title></title>
<script type="text/javascript">
    function draw() {
        var canvas = document.getElementById("Canvas1");
        if (canvas.getContext) {
            var ctx = canvas.getContext("2d");
            ctx.beginPath();
            ctx.moveTo(75, 25);
            ctx.quadraticCurveTo(25, 25, 25, 62.5);
            ctx.quadraticCurveTo(25, 100, 50, 100);
            ctx.quadraticCurveTo(50, 120, 30, 125);
            ctx.quadraticCurveTo(60, 120, 65, 100);
            ctx.quadraticCurveTo(125, 100, 125, 62.5);
            ctx.quadraticCurveTo(125, 25, 75, 25);
            ctx.stroke();
        }
        var canvas2 = document.getElementById("Canvas2");
        if (canvas2.getContext) {
            var ctx2 = canvas2.getContext("2d");
            ctx2.beginPath();
            ctx2.moveTo(75, 40);
            ctx2.bezierCurveTo(75, 37, 70, 25, 50, 25);
            ctx2.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
            ctx2.bezierCurveTo(20, 80, 40, 102, 75, 120);
            ctx2.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
            ctx2.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
            ctx2.bezierCurveTo(85, 25, 75, 37, 75, 40);
            ctx2.fill();
        }
    }
    window.onload = draw;
</script>
</head>
<body>
    <canvas id="Canvas1" width="150" height="150"></canvas>
    <canvas id="Canvas2" width="150" height="150"></canvas>
    <div>
    quadraticCurveTo(cp1x, cp1y, x, y) // BROKEN in Firefox 1.5 (see work around below)<br />
    bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)<br />
    参数 x 和 y 是终点坐标，cp1x 和 cp1y 是第一个控制点的坐标，cp2x 和 cp2y 是第二个的。
    </div>
</body>
</html>
